import { Text, View, Input, Button } from "@tarojs/components";
import { useEffect, useState } from "react";
import { getUserInfo, selectUserInfo, updateUser, updateUserInfo } from "../../api/user";
import Taro from "@tarojs/taro";
import { Video } from "@nutui/nutui-react-taro";
import { getStore } from "../../utils/localStore";
import { getParams } from "../../common/_";
import { selectEnts } from "../../api/ceshi";
import "./index.scss";

definePageConfig({
  navigationBarTitleText: "工作单位",
});

export default function ImproveUserInfo() {
  const [userName, setUserName] = useState("");
  const [enterpriseName, setEnterpriseName] = useState("");
  const [editType, setEditType] = useState();
  const [companyList, setCompanyList] = useState([]);


  useEffect(() => {
    setEditType(getParams().type)
    getUserInfo()
  }, []);

  async function getUserInfo() {
    const { data } = await selectUserInfo({})
    setUserName(data.userName)
    setEnterpriseName(data.enterpriseName)
  }

  const saveUserInfo = async () => {
    if (!userName && editType === 1) {
      await Taro.showToast({
        icon: "none",
        title: "请输入用户名！",
        duration: 2000,
      });
      return;
    }

    if (!enterpriseName && editType === 2) {
      await Taro.showToast({
        icon: "none",
        title: "请输入工作单位！",
        duration: 2000,
      });
      return;
    }

    const result = await updateUser({
      enterpriseName,
      userName,
    });

    if (!result?.success) {
      await Taro.showToast({
        icon: "none",
        title: result?.msg || "请求失败！",
        duration: 2000,
      });
      return;
    }
    await Taro.navigateBack();
  };

  async function selectCompany(val) {
    const { data } = await selectEnts({ entName: val })
    setCompanyList(data)
  }

  function getEnterVal(item) {
    setEnterpriseName(item.enterpriseName)
    setCompanyList([])
  }

  return (
    <View className={"improve-user-info-page"}>


      <View className={"input-wrapper"}>
        {
          editType === 1 &&
          <>
            <Text className={"input-title"}>昵称:</Text>
            <Input
              className="input-class"
              value={userName}
              onChange={(e) => setUserName(e?.detail?.value || "")}
              placeholder={userName || "请输入昵称"}
            />
          </>
        }
        {
          editType === 2 &&
          <>
            <Text className={"input-title"}>工作单位:</Text>
            <Input
              className="input-class"
              value={enterpriseName}
              onChange={(e) => {
                if(e?.detail?.value){
                  selectCompany(e?.detail?.value)
                }
                setEnterpriseName(e?.detail?.value || "")
              }}
              placeholder={"请输入工作单位"}
            />

            <View>
              {
                enterpriseName && companyList?.map((v, i) => {
                  return (
                    <View className="companyList" onClick={() => { getEnterVal(v) }} >
                      <Text key={i}>{v.enterpriseName}</Text>
                    </View>
                  )
                })
              }

            </View>
          </>
        }
      </View>

      <Button
        className={"save-btn"}
        onClick={saveUserInfo}
      >
        保存
      </Button>

    </View>
  );
}
